<template>
  <img src="../assets/img4.jpg" id="pic">
  <h1 id="title">欢迎来到智慧家园</h1>
  <div id="div1">
    <div >
      <el-button class="btn" @click="redirectToFront">居民入口</el-button>
      <br>
      <el-button class="btn1" @click="redirectToLogin">管理员入口</el-button>
    </div>
  </div>
  <div id="div2">
    <el-col><div class="grid-content1">房屋出租</div></el-col>
    <el-table
        :data="tableData3"
        border
        style="width: 100%"
    >
        <el-table-column
            label="地址"
            prop="place"
            width="150">
        </el-table-column>
      <el-table-column
          label="价格"
          prop="price"
          width="150">
      </el-table-column>
        <el-table-column
            label="操作"
            width="120">
          <template #default="scope">
            <el-button type="text" @click="rentbyid(scope.row)">查看</el-button>
          </template>
        </el-table-column>
    </el-table>
  </div>
  <el-button type="primary" class="rent1" @click="redirectTocheck()">租房情况查看</el-button>


  <div id="div3" >
    <el-col><div class="grid-content">社区公告</div></el-col>
    <el-table
        :data="tableData1"
        border
        style="width: 100%"

        >
      <el-table-column
          label="标题"
          prop="title"
          width="500">
      </el-table-column>
      <el-table-column
          label="操作"
          width="250">
        <template #default="scope">
          <el-button type="text" @click="showcontent(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="orderInfo" title="查看" :before-close="close1" class="dialog1">
    <template #footer>
      <div >
        <p class="content1">内容:{{tableData2.content}}</p>
      </div>
    </template>
    <el-button @click="close1()">关闭</el-button>
  </el-dialog>

  <el-dialog v-model="orderInfo1" title="具体信息查看" :before-close="close2" class="dialog-rent">
    <template #footer >
      <div class="ren2">
        <p >地点:{{tableData4.place}}</p>
        <p >面积:{{tableData4.area}}</p>
        <p >微信:{{tableData4.vx}}</p>
        <p >价格:{{tableData4.price}}</p>
        <p >具体描述:{{tableData4.description}}</p>
      </div>
      <img src="../assets/img1.jpg" class="rent-img">
    </template>
    <el-button type="primary" class="rent-button" @click="redirectToRent">我要租房</el-button>

    <el-dialog v-model="orderInfo" title="历史订单信息查看" :before-close="close1" class="dialog1">
      <el-button @click="close1()" >关闭</el-button>
    </el-dialog>
  </el-dialog>
</template>

<script>
import router from "@/router";
import request from "@/utils/request";
import row from "element-ui/packages/row";



export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Main",
  data() {
    return {
      orderInfo:false,
      orderInfo1:false,
      tableData1: [],
      tableData2: {
        title:'',
        content:'',
      },
      tableData3: [],
      tableData4: {
        place:'',
        area:'',
        vx:'',
        price:'',
        description:'',
        img:'',
      },
    }
  },
  methods: {
    redirectToLogin() {
      request.get("http://localhost:8081/seller/registerComfirm").then(res => {
            if (!res.data) {
              router.push({path: '/background/login', query: {date: new Date().getTime()}});
            } else {
              router.push({path: '/registry'});
            }
          }
      )
    },
    shownotice(){
      request.get("http://localhost:8081/seller/shownotice").then(res => {
        if (res.flag) {
          this.tableData1 = res.data;
          console.log('ghh',this.tableData1);
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    showrent(){
      request.get("http://localhost:8082/user/showrent").then(res => {
        if (res.flag) {
          this.tableData3 = res.data;
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    showcontent(row){
      this.orderInfo=true;
      this.id=row.id
      request.get("http://localhost:8081/seller/checkcontentbyid?id="+this.id).then(res => {
        if (res.flag) {
          this.tableData2 = res.data;
          console.log('ghh',this.tableData2);
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    rentbyid(row){
      this.orderInfo1=true;
      this.id=row.id
      request.get("http://localhost:8082/user/rentbyid?id="+this.id).then(res => {
        if (res.flag) {
          this.tableData4 = res.data;
          this.tableData4.img = 'data:image/png;base64,' + res.data.base64
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    redirectToFront() {
      router.push({path: '/front/login'});
    },
    redirectToRent() {
      this.$router.push({
        path: "/UserRent",
        query: { place: this.tableData4.place }
      });

    },
    redirectTocheck(){
      router.push({path: '/UserCheck'});
    },
    open1(row) {
      this.orderInfo=true;
    },
    open2() {
      this.orderInfo1=true;
    },
    close1(){
      this.orderInfo=false;
    }
  },
  created() {
    this.shownotice();
    this.showrent();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#pic
{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}


#div1 {
  position: absolute;
  left: 5%;
  right:68%;
  top: 15%;
  bottom: 50%;
  background: linear-gradient(to bottom right, #0783c1, #6abedc, #f6f6f6);
  border: 3px inset rgb(27, 28, 27);
}


#div2 {
  position: absolute;
  left: 5%;
  right:68%;
  top: 53.5%;
  bottom: 10%;
  background: linear-gradient(to bottom right, #ffffff, #ffffff, #f6f6f6);
  border: 3px inset rgb(27, 28, 27);
}

#div3 {
  position: absolute;
  left: 40%;
  right:8%;
  top: 30%;
  bottom: 10%;
  background: linear-gradient(to bottom right, #ffffff, #ffffff, #f6f6f6);
  border: 3px inset rgb(27, 28, 27);
}

#title {
  position: absolute;
  left: 40%;
  top: 5%;
}

.btn {
  transform: scale(1);
  margin-left: 100px;
  margin-top: 55px;
  width: 200px;
  height: 50px;
  background: #4bd335;
  padding: 15px 24px;
  font-size: 1.4rem;
  outline: none;
  border-radius: 8px;
  //box-shadow: -6px 6px 0 hsl(132, 78%, 45%);
}

.btn1 {
  transform: scale(1);
  margin-left: 100px;
  margin-top: 40px;
  width: 200px;
  height: 50px;
  background: #4bd335;
  padding: 15px 24px;
  font-size: 1.4rem;
  outline: none;
  border-radius: 8px;
  //box-shadow: -6px 6px 0 hsl(132, 78%, 45%);
}
.input1{
  margin-top:50px;
  margin-left:10px;
  width: 350px;
}
.input2{
  margin-top:20px;
  margin-left:10px;
  width: 350px;
}
.grid-content1 {
  min-height: 26px;
  background-color: #1cbfee;
  text-align: center;
  font-size: 20px;
}

.grid-content {
  min-height: 56px;
  background-color: #1cbfee;
  text-align: center;
  font-size: 30px;
}

.rent1{
  position: absolute;
  top: 91%;
  left: 5%;
}
.ren2{
  position: absolute;
  margin-left: 20px;
  margin-top: -40px;
}
.rent-img{
  width: 300px;
  height: 300px;
}
.rent-button{
  position: absolute;
  margin-top: 300px;
  margin-left: 30px;
}
</style>
